<script setup name="cusNav">
import { useRouter } from "vue-router";

const router = useRouter()
import { ref, watch } from "vue";

const defaultActive = ref(null)

defaultActive.value = router.currentRoute.value.path

const navList = ref([
    {
    name: '首页',
    id: 22,
    child: [
      {
        name: '首页',
        path: '/',
        id: 11,
      }
    ]
  },
  {
    name: '组织管理',
    id: 1,
    child: [
      {
        name: '人员管理',
        path: '/personnel',
        id: 11,
      },
      {
        name: '部门管理',
        path: '/organizational',
        id: 12,
      },
     
      {
        name: 'deepseek',
        path: '/ollamaDs',
        id: 14,
      },
    ]
  },
    {
    name: '项目管理',
    id: 2,
    child: [
       {
        name: '测试dwg',
        path: '/testDwg',
        id: 14,
      }
    ]
  },
  {
    name: '系统管理',
    id: 3,
    child: [
      {
        name: '角色管理',
        path: '/role',
        id: 21,
      },
      {
        name: '权限列表',
        path: '/permissions',
        id: 22,
      },
      {
        name: '自定义表单',
        path: '/customForm',
        id: 23,
      },
    ]
  }
])

</script>

<template>
  <div class="layout_nav">
    <el-menu :router="true" :default-active="defaultActive" class="el-menu-vertical-demo">
      <el-sub-menu :index="data.id" v-for="data in navList">
        <template #title>
          <i class="el-icon-location"></i>
          <span>{{ data.name }}</span>
        </template>
        <el-menu-item :index="item.path" v-for="item in data.child">{{ item.name }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
.layout_nav {
  width: 200px;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-right: 1px solid #eeeeee;

  .el-menu {
    border-right: none;
  }
}
</style>
